<template>
	<view class="myFootprints">
		<u-navbar title="我的足迹" bgColor="#fff" :autoBack="true">
		</u-navbar>
		<scroll-view class="shopUl" :class="classifyIndex==-1?'uiheight':'uiheightTwo'" scroll-y="true" lower-threshold="50"
			@scrolltolower="classifyLower">
			<view class="shopBox" v-for="(item,index) in allShopList" :key="index" @click="goodsClick(item)">
				<view class="shopItembox flex_heng">
					<image :src="item.pic" mode="" class="shopThumb"></image>
					<view class="itemCon flex_shu">
						<view class="itemTag">
							<!-- <text v-if="item.tag">{{item.tag}}</text> -->
						</view>
						<view class="itemName">
							<text class="u-line-1">{{item.title}}</text>
						</view>
						<view class="itemBtm flex_heng">
							<u--text mode="price" :text="item.price" color="#FF483C" size="36rpx"></u--text>
							<image :src="imgUrl + 'chat.png'" mode="" class="chatImg"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getFootprintList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				imgUrl: this.$imgUrl,
				allShopList: [],
				pageNum: 1
			};
		},
		onReachBottom() {
			this.pageNum++;
			this.getFootprintList();
		},
		onLoad(options) {},
		onShow() {
			this.pageNum = 1;
			this.allShopList = [];
			this.getFootprintList();
		},
		methods: {
			getFootprintList() {
				getFootprintList({
					pageNum: this.pageNum,
					pageSize: 20,
					type: 2,
				}).then(res => {
					console.log(res)
					if (res.rows.length > 0) {
						this.allShopList = [...this.allShopList, ...res.rows];
					}
				})
			},
			//点击商品
			goodsClick(item) {
				uni.navigateTo({
					url: `/pages/package/goodsDetail/goodsDetail?goodsId=${item.productId}`
				})
			},
			//分类列表到底
			classifyLower() {
				console.log('分类列表到底')
			},
		},
	}
</script>

<style lang="scss">
	.myFootprints {
		min-height: 100vh;
		padding: 180rpx 28rpx 0;
		box-sizing: border-box;
		background-color: #F6F6F6;

		.shopUl {
			width: 100%;

			.shopBox {
				width: 100%;

				.shopItembox {
					margin-top: 28rpx;
					width: 100%;
					border-radius: 28rpx;
					opacity: 1;
					background: #ffffff;
					padding: 28rpx;
					box-sizing: border-box;

					.shopThumb {
						width: 160rpx;
						height: 160rpx;
					}

					.itemCon {
						width: calc(100% - 180rpx);
						height: 160rpx;
						align-items: flex-start;
						justify-content: space-around;

						.itemTag {
							text {
								border-radius: 8rpx;
								opacity: 1;
								background: #000000;
								color: #f6ce55;
								font-size: 20rpx;
								font-weight: 600;
								font-family: "Alibaba PuHuiTi 2.0";
								padding: 4rpx;
							}
						}

						.itemName {
							color: #000000;
							font-size: 28rpx;
							font-weight: 500;
						}

						.itemBtm {
							width: 100%;

							.chatImg {
								width: 48rpx;
								height: 48rpx;
							}
						}
					}

				}

			}
		}
	}
</style>